<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-22 01:23
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->

<template>
  <div>
    <div class="x-render-right-link">
      <a-button type="link" @click="openInfoHandler">
        点击查看 {{ title }}
      </a-button>&nbsp;
      <div class="x-render-right-link-tip">属性详细解释</div>
    </div>
    <div class="x-render-right-search" v-if="showSearch">
      <a-input-search
        v-model.trim="keyword"
        allowClear
        enter-button
        placeholder="请输入关键字搜索属性"
        @change="searchHandler"
        @search="searchHandler"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'XDesignFormAttrsHeader',
  props: {
    url: String,
    title: String,
    showSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    openInfoHandler() {
      window.open(this.url)
    },
    searchHandler() {
      this.$emit('change', this.keyword)
    }
  }
}
</script>

<style lang="css" scoped>
.x-render-right-link {
  display: flex;
  flex-flow: row nowrap;
  color: #666;
  font-size: 14px;
  margin-left: 24px;
  padding-left: 10px;
  margin-bottom: 10px;
  border-left: 3px solid #eee;
}

.x-render-right-link-tip {
  display: grid;
  place-items: center;
  height: 32px;
}

.x-render-right-search {
  padding: 20px;
  box-sizing: border-box;
}
</style>
